<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐，触摸你的心</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/libs/icon/iconfont.css">
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <!-- header -->
    <header>
    </header>
    <!-- banner -->
    <div class="swiper-container lunbo">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/images/banner-1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner-2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner-3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner-4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner-5.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="banner-pagination swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
    </div>
    
    <!-- recommend推荐 -->
    <div class="recommend">
        <div class="recommend-con">
            <ul class="rec-kind">
                <li><a href="http://localhost:8888/html/list.html">
                    <i class="iconfont 
                    icon-rexiao1
                    "></i>
                    <span>热销爆品</span>
                </a></li>
            </ul>
            <ul class="rec-kind">
                <li><a href="http://localhost:8888/html/list.html">
                    <i class="iconfont 
                    icon-rexiao1
                    "></i>
                    <span>热销爆品</span>
                </a></li>
            </ul>
            <ul class="rec-kind">
                <li><a href="http://localhost:8888/html/list.html">
                    <i class="iconfont 
                    icon-rexiao1
                    "></i>
                    <span>热销爆品</span>
                </a></li>
            </ul>
            <ul class="rec-kind">
                <li><a href="http://localhost:8888/html/list.html">
                    <i class="iconfont 
                    icon-rexiao1
                    "></i>
                    <span>热销爆品</span>
                </a></li>
            </ul>
        </div>
    </div>
    <!-- subject主题 -->
    <div class="subject">
        <div class="subject-con">
            <div class="sub-box">
                <a href="http://localhost:8888/html/list.html" class="sub-part1 float_left"><img src="/images/music.163_13.jpg" alt="">
                </a>
                <a href="http://localhost:8888/html/list.html" class="sub-part2 float_right">
                    <img src="/images/music.163_15.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- goods商品区域 -->
    <div class="goods">
        <div class="goods-con">
            <h3>编辑推荐</h3>
            <ul class="goods-box clear_fix" id="categoryList"> 
            </ul>
            <script type="text/html" id="categoryTemplate">
                {{each list cate,index}}
                <li class="goods-list" >
                    <a href="/html/details.html?id={{cate.id}}" target="_blank">
                        <img src="{{cate.src}}" alt="">
                    </a>
                    <div class="produce">
                        <span>{{cate.active}}</span>
                        <a href="">{{cate.content}}</a>>
                    </div>
                    <em>{{cate.price}}</em>
                </li>
                {{/each}}
            </script>
        </div>
    </div>
    <!-- msc-modules音乐模块 -->
    <div class="msc-md">
        <div class="msc-md-con">
            <div class="msc-box">
                <h4>
                    <i class="iconfont icon-guangpan
                    "></i>
                    <span>数字专辑</span>
                </h4>
                <p>Taylor Swift 新专辑火热售卖中</p>
                <a href="http://localhost:8888/html/details.html">立即购买 ></a>
            </div>
            <a href="" class="msc-img"><img src="/images/music.163_22.jpg" alt=""></a>
        </div>
    </div>
    <!-- hot-goos热门商品 -->
    <div class="hot-goods">
        <div class="hot-goods-con">
            <h3>编辑推荐</h3>
            <ul class="hot-goods-box clear_fix" id="goodsList">
                
            </ul>
            <script type="text/html" id="goodsTemplate">
                {{each list item}}
                <li class="hot-goods-list" >
                    <a href="/html/details.html?id={{item.id}}" target="_blank">
                        <img src="{{item.src}}" alt="">
                    </a>
                    <div class="produce">
                        <span>{{item.active}}</span>
                        <a href="">{{item.content}}</a>>
                    </div>
                    <em>￥{{item.price}}</em>
                </li>
                {{/each}}
            </script>
        </div>
    </div>
    <footer></footer>
    <div class="float-box" id="float-box"></div>
<script src="/libs/require/require.min.js" data-main="/js/index"></script>
</body>
</html>